<template>
	<view class="content">
		<view class="nav-bar" :style="{top: paddingTop + 4 + 'px', height: navBarHeight - 8 + 'px', width: navBarHeight - 8 + 'px'}" @click="back">
			<uni-icons type="left" size="24" color="#ffffff"></uni-icons>
		</view>
		<template v-if="goods">
			<view class="uni-margin-wrap" >
				<swiper v-if="goods.goods.images.length > 1" class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
					:duration="500">
					<swiper-item v-for="(item,i) in goods.goods.images" :key="i" >
						<img class="swiper-ad" :src="item" alt="" />
					</swiper-item>
				</swiper>
				<image v-else class="single-banner" :src="goods.goods.images[0]" mode=""></image>
			</view>
			<view class="detail-wrap">
				<view class="detail-content" :class="isActivity ? 'pt60':''">
					<image v-if="isActivity" class="activity-icon" :src="getActivityInfo(minSku.activity_type, 'icon')" mode=""></image>
					<view class="detail-content-head h56">
						<view v-if="isActivity" class="detail-new">
							<view class="detail-price">￥{{getActivityPrice(1)}}</view>
							<view class="origion">￥{{getActivityPrice(1, true)}}</view>
						</view>
						<view v-else class="detail-price">
							{{getPrice(1)}}
						</view>
						<view class="detail-share">
							<image class="share-icon" src="../../static/images/share.svg" alt="" />
							<text class="share-text">分享</text>
							<button open-type="share"></button>
						</view>
					</view>
					<view class="detail-content-name">
							{{goods.goods.title}}
					</view>
					<view class="flex mt20">
						<view class="back" v-if="isActivity">可免单{{getActivityPrice(2)}}</view>
						<view class="back" v-else>可免单{{getPrice(2)}}</view>
						<view v-if="goods.goods.sold" class="detail-salemount">
							已售&nbsp;&nbsp;{{goods.goods.sold}}
						</view>
					</view>
				</view>
				<view class="box mt24">
					<view class="box-list flex" @click="toShop">
						<view class="box-list-label">商家信息</view>
						<view class="flex-center">
							<image :src="goods.shop.thumbnail" mode="" class="icon"></image>
							<view class="box-list-label txt">{{goods.shop.name}}</view>
							<image class="arrow" src="../../static/images/arrow-r.svg" mode=""></image>
						</view>
					</view>
					<view class="box-list flex" @click="setPop(1)">
						<view class="box-list-label">配送方式</view>
						<view class="flex-center">
							<view class="box-list-label txt">{{goods.goods.shipping_type === 2 ? '用户自提':'快递发货'}}</view>
							<image class="arrow" src="../../static/images/arrow-r.svg" mode=""></image>
						</view>
					</view>
					<view class="box-list flex"  @click="setPop(2)">
						<view class="box-list-label">排队模式</view>
						<view class="flex-center">
							<view class="box-list-label txt">{{goods.shop.back_independent === -1 ? '全网排队':'单店排队'}}</view>
							<image class="arrow" src="../../static/images/arrow-r.svg" mode=""></image>
						</view>
					</view>
				</view>
				<view class="box mt24" v-if="goods.goods.shipping_type === 1 || leaderId > 0">
					<view class="box-list flex" @click="setPop(3)">
						<view class="box-list-label">运费</view>
						<view class="flex-center">
							<view v-if="shipInfo.fee > 0" class="box-list-label txt">¥{{(shipInfo.fee / 100).toFixed(2)}},满¥{{(shipInfo.max / 100).toFixed(2)}}包邮</view>
							<view v-else class="box-list-tag">包邮</view>
							<image class="arrow" src="../../static/images/arrow-r.svg" mode=""></image>
						</view>
					</view>
					<view class="box-list flex" v-if="leaderId > 0" @click="setPop(4)">
						<view class="box-list-label">团长佣金</view>
						<view class="flex-center">
							<view class="box-list-label active">{{getPrice(3)}}</view>
							<image class="arrow" src="../../static/images/arrow-r.svg" mode=""></image>
						</view>
					</view>
				</view>
				<view class="ship" v-if="goods.shipping_rule">
					<view class="ship-title">发货特别说明</view>
					<view class="ship-sub-title" v-if="goods.shipping_rule.not_send_desc">{{goods.shipping_rule.not_send_desc}}</view>
					<view class="ship-con" v-if="goods.shipping_rule.not_send_areas">
						<view v-for="(item,i) in goods.shipping_rule.not_send_areas" :key="item.id" class="txt">
							{{item.name}}<template v-if="i< goods.shipping_rule.not_send_areas.length - 1">，</template>
						</view>
					</view>
					<view class="ship-sub-title mt34" v-if="goods.shipping_rule.fee_desc">{{goods.shipping_rule.fee_desc}}</view>
					<view class="ship-con" v-if="goods.shipping_rule.fee_areas">
						<view v-for="(item,i) in goods.shipping_rule.fee_areas" :key="i" class="txt">
							{{item.name}}(+{{(item.fee / 100).toFixed(1)}}元)<template v-if="i< goods.shipping_rule.fee_areas.length-1">，</template>
						</view>
					</view>
				</view>
				<view class="richtext-content mt26" v-if="goods.goods.content || goods.shop.goods_default_content">
					<template v-if="goods.shop.goods_default_content">
						<u-parse :content="goods.shop.goods_default_content" />
					</template>
					<template v-if="goods.goods.content">
						<u-parse :content="goods.goods.content" />
					</template>
				</view>
			</view>
			<view class="detail-foot">
				<view class="detail-con">
					<view class="foot-l">
						<view class="foot-btn" @click="toService">
							<image class="icon" src="../../static/images/service.svg"></image>
							<text class="name">客服</text>
						</view>
						<view class="foot-btn" @click="toCart">
							<uni-badge class="uni-badge-left-margin" :text="carts.length" absolute="rightTop" size="small">
								<image class="icon" src="../../static/images/cart.svg"></image>
							</uni-badge>
							<text class="name" >购物车</text>
						</view>
						<view class="foot-btn" @click="toIndex">
							<image class="icon" src="../../static/images/home.svg"></image>
							<text class="name">首页</text>
						</view>
					</view>
					<template v-if="good_stock < 1">
						<div class="foot-r"><view class="foot-buy-3">库存不足</view></div>
					</template>
					<template v-else-if="good_status">
						<div class="foot-r"><view class="foot-buy-3">商品已下架</view></div>
					</template>
					<template v-else>
						<view class="foot-r" v-if="goods.goods.shipping_type === 1">
							<view class="foot-add" @click="buyNow(1)">加入购物车</view>
							<view class="foot-buy" @click="buyNow(2)">立即购买</view>
						</view>
						<view class="foot-r" v-else>
							<view class="foot-buy-2" @click="buyNow(2)">立即购买</view>
						</view>
					</template>
				</view>
			</view>
		</template>
		
		<uni-popup type="bottom" ref="popup" :is-mask-click="true" @close="close">
			<view class="buy-popup" v-if="currentSku">
				<view class="bp-goods">
					<view class="bp-goods-pic">
						<image :src="currentSku.thumbnail ? currentSku.thumbnail : goods.goods.thumbnail" mode="aspectFill"></image>
					</view>
					<view class="bp-goods-content">
						<view class="bp-name">
							{{currentSku.title}}
						</view>
						<view class="flex-end" v-if="cActivitySku">
							<goods-price :price="cActivitySku.activity_price"></goods-price>
							<view class="origion">￥{{(currentSku.sale_price / 100).toFixed(2)}}</view>
							<view class="back ml10 mb4" v-if="cActivitySku.activity_price * goods.back_self_ratio / 100 / 100 >= 0.01">
								可免单¥{{(cActivitySku.activity_price * goods.back_self_ratio / 100 / 100).toFixed(2)}}
							</view>
						</view>
						<view class="flex-center" v-else>
							<goods-price :price="isLeader ? currentSku.share_price : currentSku.sale_price"></goods-price>
							<view class="back ml10" >
								可免单¥{{isLeader ? (currentSku.share_price * goods.back_self_ratio / 100 / 100).toFixed(2) : (currentSku.sale_price * goods.back_self_ratio / 100 / 100).toFixed(2)}}
							</view>
						</view>
					</view>	
				</view>
				<view class="bp-cate" v-if="goods && goods.goods.goods_sku && goods.goods.goods_sku.length > 0">
					<view v-if="(cActivitySku && cActivitySku.limit_qty > 0)" class="bp-activity-tip">活动说明：每人限购{{cActivitySku.limit_qty}}件享受{{getActivityInfo(cActivitySku.activity_type, 'name')}}价</view>
					<view class="bp-txt">规格</view>
					<scroll-view class="bp-cate-scroll" scroll-y="true">
						<view class="bp-cate-box">
							<view v-for="item in goods.goods.goods_sku" :key="item.id" :class="['bp-cate-list',(item.status != 1 || item.stock < 1) ? 'disable' : currentSku.id == item.id ? 'active':'']" @click="selSku(item)">
								<image v-if="isActivity && item.activity_price > 0" :src="getActivityInfo(item.activity_type, 'tag')" class="tag"></image>
								<view class="cate-list-tit">{{item.title}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="bp-qty">
					<text class="bp-txt">购买数量</text>
					<number-box v-model="buyQty" :name="goods.goods.id" :min="1" :max="good_max_qty" :cursor-spacing="80"></number-box>
				</view>
				<view v-if="max_qty > 0" class="bp-tip">商品最大购买数量为{{good_max_qty}},超过将无法下单</view>
				<view class="bp-btn" @click="nextPay">确定</view>
			</view>
		</uni-popup>
	
		<uni-popup type="bottom" ref="detail" :is-mask-click="true" @close="closePop">
			<view class="detail-pop">
				<image src="../../static/images/icon_close.svg" mode="" class="pop-close" @click="closePop"></image>
				<template v-if="popType === 1">
					<view class="pop-head mb40">配送方式说明</view>
					<view class="pop-tit mb40">快递发货</view>
					<view class="pop-desc mb40">正常情况下单后48小时内发货，如遇特殊情况或者发货区域限制等，以平台通知或商品详情内发货说明为准。</view>
					<view class="pop-tit mb40">用户自提</view>
					<view class="pop-desc">需用户至商户地址中自提，到达商家地址后向商家展示您的订单详情，检查商家提供的货物完整后，点击确认收货即可。</view>
				</template>
				<template v-if="popType === 2">
					<view class="pop-head mb40">排队模式说明</view>
					<view class="pop-tit mb40">全网排队</view>
					<view class="pop-desc mb40">可以享受全其他网排队订单的免单</view>
					<view class="pop-tit mb40">单店排队</view>
					<view class="pop-desc">只有当其他用户在此商户购买了商品后你才可以享受免单</view>
				</template>
				<template v-if="popType === 3">
					<view class="pop-head mb40">运费说明</view>
					<view class="pop-con">
						<template v-if="goods.goods.shipping_type === 2">
							<view class="pop-tit mb40">此商户购买的商品全部包邮</view>
						</template>
						<template v-else-if="shipInfo.fee > 0">
							<view class="pop-tit" style="font-size: 30rpx;">此商户运费规则如下：</view>
							<view class="pop-tit">起始运费：<text class="pop-tit active">¥{{(shipInfo.fee / 100).toFixed(2)}}</text></view>
							<view class="pop-tit" v-for="(item,i) in goods.shop.shipping_rules.slice(0, goods.shop.shipping_rules.length-1)" :key="item.id">
								满{{(item.amount / 100).toFixed(2)}}元运费：<text class="pop-tit active"> ¥{{(goods.shop.shipping_rules[i+1].fee / 100).toFixed(2)}}</text>
							</view>
							<view class="pop-tit mb40 active">满{{(shipInfo.max / 100).toFixed(2)}}元包邮</view>
						</template>
						<template v-else>
							<view class="pop-tit">此商户购买的商品全部包邮</view>
						</template>
					</view>
					<view class="pop-desc">注：如果商品详情中设置了特殊区域额外运费的情况，则需要额外收取运费</view>
				</template>
				<template v-if="popType === 4">
					<view class="pop-head mb40">团长佣金</view>
					<view class="pop-tit mb40">通过你的分享链接进入小程序并购买了此商品的用户，当用户收到商品并确认订单后，你即可获得佣金。
					佣金在我的>团长收益中查看并提现</view>
					<view class="pop-btn" >
						立即分享给好友
						<button open-type="share"></button>
					</view>
				</template>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { goodsDetail, activityDetail } from '@/http/apis.js';
	import { mapGetters, mapMutations } from "vuex";
	import uParse from '@/components/gaoyia-parse/parse.vue';
	import { toCustomerService, formatRichText, activityImages } from '@/utils/index.js';
	import {getCurrentInstance, ref, nextTick, computed } from 'vue'
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	import { useMutations } from '../../store/hooks/useMutations';
	import { useGetters } from '../../store/hooks/useGetters';
	
	const { proxy } = getCurrentInstance();
	const { $onLaunched } = proxy;
	const max_qty = ref(0);
	const goodId = ref(0);
	const paddingTop = getApp().globalData.statusBarHeight;
	const navBarHeight = getApp().globalData.navBarHeight;
	const {isLeader, inviter, carts, user, configs, leaderId} = useGetters(['isLeader', 'inviter', 'carts', 'user','configs', 'leaderId']);
	const { setCarts } = useMutations(['setCarts']);
	
	const goods = ref(null);
	onLoad(async (e) => {
		await $onLaunched;
		goodId.value = e.id;
		goodsDetail({id: e.id}).then(res => {
			res.goods.content = formatRichText(res.goods.content);
			res.shop.goods_default_content = formatRichText(res.shop.goods_default_content);
			if (res.shipping_rule) {
				if (res.shipping_rule.not_send_areas) {
					res.shipping_rule.not_send_areas = JSON.parse(res.shipping_rule.not_send_areas)
				}
				if (res.shipping_rule.fee_areas) {
					res.shipping_rule.fee_areas = JSON.parse(res.shipping_rule.fee_areas)
				}
			}
			res.goods.images = res.goods.images.split(',');
			goods.value = res;
			getActivitySku(e.id)
			configs.value.map(item => {
				if (item.config_key == 'order_goods_max_qty') {
					max_qty.value = parseInt(item.config_value);
				}
			})
		}).catch(res => {
			
		})
	})
	onShow(() => {
		configs.value.map(item => {
			if (item.config_key == 'order_goods_max_qty') {
				max_qty.value = parseInt(item.config_value);
			}
		})
	})
	const shipInfo = computed(() => {
		let info = {fee: 0,max: 0};
		if (goods.value && goods.value.shop && goods.value.shop.shipping_rules.length > 0) {
			const rules = goods.value.shop.shipping_rules;
			rules.map(item => {
				if (item.fee > info.fee) {
					info.fee = item.fee;
				}
				if (item.amount > info.max) {
					info.max = item.amount;
				}
			})
		}
		return info;
	})
	const good_max_qty = computed(() => {
		let min = 0;
		if (currentSku.value) {
			if (max_qty.value == 0) {
				min = currentSku.value.stock;
			} else {
				min = Math.min(max_qty.value, currentSku.value.stock)
			}
		}
		return min;
	})
	const good_stock = computed(() => {
		let stock = 0;
		if (goods.value && goods.value.goods) {
			let sku = goods.value.goods.goods_sku;
			for (let i = 0; i < sku.length; i++) {
				if(sku[i].stock > 0) {
					stock = sku[i].stock;
					break;
				}
			}
		}
		return stock;
	})
	const good_status = computed(() => {
		let status = true; // true为商品下架
		if (goods.value && goods.value.goods) {
			if (goods.value.goods.status != 1 || goods.value.shop.status != 2) {
				return status;
			} 
			let sku = goods.value.goods.goods_sku;
			status = sku.filter(item => item.status != 1).length == sku.length;
		}
		return status;
	})
	// 活动sku详情
	const activity_sku = ref([]); // 活动商品sku
	const isActivity = ref(false); // 是否是活动商品
	const minSku = ref(null); // 界面展示活动信息的sku
	const getActivitySku = (id) => {
		activityDetail({id: id}).then(res => {
			if (res) {
				activity_sku.value = res.filter(as => (as.limit_total > as.used_qty && as.user_used_qty < as.limit_qty));
				goods.value.goods.goods_sku.map(item => {
					res.map(as => {
						if (as.sku_id === item.id) {
							const params = {limit_total: as.limit_total,used_qty: as.limit_qty,user_used_qty: as.user_used_qty,limit_qty: as.limit_qty,activity_type: as.activity_type, activity_price: as.activity_price};
							item = Object.assign(item, {...params})
						}
					})
				})
				isActivity.value = activity_sku.length > 0;
				let minSku = null;
				let price = Infinity;
				activity_sku.map(item => {
					if (item.activity_price < price) {
						price = item.activity_price;
						minSku = item;
					}
				})
				minSku.value = minSku;
			}
		})
	}
	// 获取sku价格、免单、佣金区间
	const getPrice = (type) => {
		let priceStr = '';
		let backStr = '';
		let commissionStr = '';
		let sku = goods.value.goods.goods_sku || [];
		if (sku.length == 0) {
			priceStr = isLeader.value ? `¥${(goods.value.goods.share_price / 100).toFixed(2)}` : `¥${(goods.value.goods.sale_price / 100).toFixed(2)}`
			backStr = isLeader.value ? `¥${(goods.value.goods.share_price * goods.value.back_self_ratio / 100 / 100).toFixed(2)}` : `¥${(goods.value.goods.sale_price * goods.value.back_self_ratio / 100 / 100).toFixed(2)}`
			commissionStr = `¥${(goods.value.goods.commission / 100).toFixed(2)}`
		} else {
			let priceArr = sku.map(item => isLeader.value ? item.share_price : item.sale_price);
			let max = Math.max(...priceArr)
			let min = Math.min(...priceArr)
			
			if (max == min) {
				priceStr = `¥${(min / 100).toFixed(2)}`
				backStr = `¥${(min  * goods.value.back_self_ratio / 100 / 100).toFixed(2)}`
			} else {
				priceStr = `¥${(min/ 100).toFixed(2)} - ¥${(max / 100).toFixed(2)}`
				backStr = `¥${(min * goods.value.back_self_ratio / 100/ 100).toFixed(2)} - ¥${(max * goods.value.back_self_ratio / 100 / 100).toFixed(2)}`
			}
		}
		if (type === 1) {
			return priceStr;
		} else if (type === 2){
			return backStr;
		} else if (type === 3){
			let commissionArr = sku.map(item => item.commission)
			let missMax = Math.max(...commissionArr)
			let missMin = Math.min(...commissionArr)
			if (missMax == missMin) {
				commissionStr = `¥${(missMin / 100).toFixed(2)}`
			} else {
				commissionStr = `¥${(missMin / 100).toFixed(2)} - ¥${(missMax / 100).toFixed(2)}`
			}
			return commissionStr;
		}
	}
	// 获取活动sku价格 1最低活动价，origin 原价, 2 免单区间
	const getActivityPrice = (type, origin = false) => {
		if (type === 1) {
			let minSku = null;
			let price = Infinity;
			activity_sku.value.map(item => {
				if (item.activity_price < price) {
					price = item.activity_price;
					minSku = item;
				}
			})
			if (origin) {
				let good_sku = goods.value.goods.goods_sku.find(item => item.id === minSku.sku_id);
				return (good_sku.sale_price / 100).toFixed(2)
			} else {
				return (minSku.activity_price / 100).toFixed(2);
			}
		} else if (type === 2) {
			let priceArr = activity_sku.value.map(item=> item.activity_price)
			let max = Math.max(...priceArr)
			let min = Math.min(...priceArr)
			let priceStr = '';
			if (max == min) {
				priceStr = `¥${(min * goods.value.back_self_ratio / 100 / 100).toFixed(2)}`
			} else {
				priceStr = `¥${(min * goods.value.back_self_ratio / 100 / 100).toFixed(2)} - ¥${(max * goods.value.back_self_ratio / 100 / 100).toFixed(2)}`
			}
			return priceStr;
		}
	}
	const back = () => {
		const pages = getCurrentPages();
		if (pages.length > 1) {
			uni.navigateBack()
		} else {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	}
	const toService = () => {
		toCustomerService();
	}
	const toCart = () => {
		uni.switchTab({
			url: '/pages/cart/index'
		})
	}
	const toIndex = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	
	const cActivitySku = ref(null); // 当前活动sku类型
	const popup = ref(null); // 弹窗
	const operateType = ref(1); // 购物车1或立即购买2
	const buyNow = (type) => {
		popup.value.open();
		operateType.value = type;
		
		const sku = goods.value.goods.goods_sku || [];
		for (let i = 0; i < sku.length; i++) {
			if(sku[i].status === 1 && sku[i].stock > 0) {
				const asku = activity_sku.value.find(item => (item.sku_id == sku[i].id));
				currentSku.value = sku[i];
				cActivitySku.value = asku ? asku : null;
				break;
			}
		}
	}
	const currentSku = ref(null); // 当前类型
	const selSku = (item) => {
		if (item.stock < 1 || item.status != 1) return;
		const asku = activity_sku.value.find(as => (as.sku_id == item.id));
		currentSku.value = item;
		cActivitySku.value = asku ? asku : null;
	}
	const buyQty = ref(1);
	const nextPay = () => {
		setTimeout(() => {
			popup.value.close();
			if (operateType.value === 1) { // 购物车
				let newCarts = carts.value;
				let flag = false; // 购物车 里该商品是否已经存在
				newCarts.map(item => {
					if (item.id == goods.value.goods.id && (item.skuId == currentSku.value.id)) {
						if (item.count + buyQty.value <= good_max_qty.value) item.count += buyQty.value;
						else item.count = good_max_qty.value;
						flag = true;
					}
				})
				if (!flag) newCarts.push({id: goods.value.goods.id, count: buyQty.value, skuId: currentSku.value.id, selected: false})
				setCarts(newCarts);
				uni.setStorageSync('carts', JSON.stringify(newCarts));
				uni.showToast({
					title: "添加购物车成功"
				})
			} else { // 立即购买
				if (buyQty.value > good_max_qty.value) {
					uni.showToast({
						icon: 'none',
						title: '数量超出限制'
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/pay/index?id=' + goods.value.goods.id+"&qty="+buyQty.value+"&skuId="+currentSku.value.id
				})
			}
		}, 200)
	}
	
	const onShareAppMessage = () => {
		var url = `pages/goodsDetail/index?inviter=${user.value.user.id}&id=${goodId.value}`
		return {
		  title: goods.value.goods.title,
		  imageUrl: goods.value.goods.images[0],
		  path: url
		};
	}
	const close = () => {
		popup.value.close();
	}
	// 打开商户地址导航
	const openShopLocation = () => {
		if (goods.value.goods.shipping_type === 2) {
			uni.openLocation({
				latitude: goods.value.shop.lat,
				longitude: goods.value.shop.lon,
				name: goods.value.shop.name,
				address: goods.value.shop.address,
				scale:28
			})
		}
	}
	// 店铺详情
	const toShop = () => {
		uni.navigateTo({
			url: '/pages/mall/detail?id=' + goods.value.shop.id 
		})
	}
	
	const popType = ref(0);
	const detail = ref(null); // 弹窗
	const setPop = (type) => {
		popType.value = type;
		detail.value.open();
	}
	const closePop = () => {
		popType.value = 0;
		detail.value.close();
	}
	const getActivityInfo = (type, param) => {
		return activityImages[type][param]
	}
</script>
<style lang="scss" scoped>
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.flex-center {
		display: flex;
		align-items: center;
	}
	.flex-end {
		display: flex;
		align-items: flex-end;
	}
	.mt20 {
		margin-top: 20rpx;
	}
	.mt24 {
		margin-top: 24rpx;
	}
	.mt34 {
		margin-top: 34rpx;
	}
	.arrow {
		width: 12rpx;
		height: 24rpx;
		margin-left: 32rpx;
	}
	.origion {
		color: #969799;
		font-size: 24rpx;
		height: 40rpx;
		line-height: 40rpx;
		margin-left: 10rpx;
		text-decoration: line-through;
	}
	.back {
		padding: 0 8rpx;
		box-sizing: border-box;
		background: rgba(252, 73, 81, 0.1);
		font-size: 24rpx;
		font-weight: normal;
		line-height: 36rpx;
		height: 36rpx;
		color: #FC4951;
		border-radius: 4rpx;
		display: inline-block;
		&.ml10 {
			margin-left: 10rpx;
		}
		&.mb4 {
			margin-bottom: 4rpx;
		}
	}
	.content {
		width: 100%;
		min-height: 100vh;
		background-color: #F8FAFD;
		.nav-bar {
			position: absolute;
			top: 100rpx;
			left: 25rpx;
			height: 60rpx;
			width: 60rpx;
			background-color: rgba(0, 0, 0, 0.7);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 9;
		}
	}
	.uni-margin-wrap {
		width: 100%;
		height: 600rpx;
		margin-bottom: 48rpx;
		.single-banner {
			width: 100%;
			height: 100%;
		}
		.swiper {
			width: 100%;
			height: 600rpx;
			.swiper-ad {
				width: 100%;
				height: 600rpx;
				border-radius: 8rpx;
			}
		}
	}
	.detail-wrap {
		width: 100%;
		padding: 0 25rpx 100rpx 25rpx;
		box-sizing: border-box;
		.richtext-content {
			width: 100%;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 26rpx 20rpx;
			box-sizing: border-box;
			&.mt26 {
				margin-top: 26rpx;
			}
		}
		.box {
			width: 100%;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 6rpx 24rpx 6rpx 34rpx;
			box-sizing: border-box;
			.box-list {
				border-bottom: 1rpx solid #F1F1F1;
				width: 100%;
				padding: 20rpx 0 26rpx 0;
				box-sizing: border-box;
				&:last-child {
					border: none;
				}
				.box-list-label {
					color: #969799;
					font-size: 28rpx;
					line-height: 44rpx;
					height: 44rpx;
					&.txt {
						color: #2e2e2e;
					}
					&.active {
						color: #FC4951;
					}
				}
				.box-list-tag {
					height: 44rpx;
					line-height: 44rpx;
					border-radius: 8rpx;
					padding: 0 18rpx;
					box-sizing: border-box;
					color: #FE8A01;
					font-size: 28rpx;
					background: rgba(254, 138, 1, 0.1);
				}
				.icon {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}
			}
		}
		.detail-content {
			width: 100%;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 26rpx 20rpx;
			box-sizing: border-box;
			position: relative;
			overflow: hidden;
			&.pt60 {
				padding-top: 60rpx;
			}
			&.mt26 {
				margin-top: 26rpx;
			}
			&.big-padding {
				padding: 36rpx 28rpx;
			}
			.activity-icon {
				position: absolute;
				top: 0;
				left: 0;
				width: 154rpx;
				height: 44rpx;
				border-bottom-right-radius: 4rpx;
			}
			.detail-content-head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				&.h56 {
					height: 56rpx;
				}
				&.h44 {
					height: 44rpx;
				}
				&.mt28 {
					margin-top: 28rpx;
					align-items: flex-start;
				}
				.detail-price {
					font-size: 48rpx;
					font-weight: bold;
					line-height: 56rpx;
					color: #FC4951;
				}
				.detail-new {
					display: flex;
					align-items: flex-end;
					.tag {
						height: 50rpx;
						border-radius: 4rpx;
						padding: 0 20rpx;
						box-sizing: border-box;
						color: #fff;
						font-size: 24rpx;
						line-height: 50rpx;
						margin-right: 10rpx;
						background: linear-gradient(180deg, #FF7719 0%, #FF3500 100%);
					}
				}
				.detail-share {
					width: 88rpx;
					height: 44rpx;
					border-radius: 20px 0px 0px 20px;
					background: #F8FAFD;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					margin-right: -20rpx;
					button {
						opacity: 0;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						width: 100%;
						height: 100%;
					}
					.share-icon {
						width: 24rpx;
						height: 24rpx;
					}
					.share-text {
						font-size: 20rpx;
						font-weight: normal;
						line-height: 40rpx;
						color: #969799;
					}
				}
			}
			.detail-content-name {
				color: #000;
				font-size: 32rpx;
				line-height: 40rpx;
				margin-top: 20rpx;
			}
			.detail-salemount {
				color: #969799;
				font-size: 28rpx;
				line-height: 44rpx;
			}
		}
		.ship {
			width: 100%;
			padding: 84rpx 36rpx 34rpx 22rpx;
			box-sizing: border-box;
			position: relative;
			background-color: #FFF9F6;
			border-radius: 16rpx;
			margin-top: 26rpx;
			.ship-title {
				height: 56rpx;
				line-height: 56rpx;
				border-top-left-radius: 24rpx;
				border-bottom-right-radius: 24rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				color: #662D0E;
				font-size: 32rpx;
				background: linear-gradient(94deg, #F8D3B4 0%, #F0B290 96%);
				position: absolute;
				top: 0;
				left: 0;
			}
			.ship-sub-title {
				width: 100%;
				color: #AF9486;
				font-size: 24rpx;
				line-height: 44rpx;
				margin-bottom: 14rpx;
			}
			.ship-con {
				width: 100%;
				padding: 17rpx 14rpx;
				box-sizing: border-box;
				background: #FCEFE8;
				border-radius: 16rpx;
				min-height: 120rpx;
				display: flex;
				flex-wrap: wrap;
				.txt {
					color: #F17C43;
					font-size: 24rpx;
					line-height: 28rpx;
				}
			}
		}
	}
	.detail-foot {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		// padding: 10rpx 25rpx 52rpx 37rpx;
		box-sizing: border-box;
		background-color: #fff;
		
		.detail-tip {
			width: 100%;
			color: #EF1224;
			font-size: 24rpx;
			height: 56rpx;
			line-height: 48rpx;
			border-bottom: 1rpx solid #F1F1F1;
			margin-bottom: 10rpx;
		}
		.detail-con {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.foot-l {
			display: flex;
			.foot-btn {
				width: 72rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-right: 42rpx;
				::v-deep .uni-badge-left-margin {
					height: 48rpx;
				}
				.icon {
					width: 48rpx;
					height: 48rpx;
				}
				.name {
					color: #000;
					font-size: 24rpx;
					line-height: 40rpx;
					height: 40rpx;
				}
			}
		}
		.foot-r {
			display: flex;
			.foot-add {
				width: 176rpx;
				height: 72rpx;
				border-radius: 40px 0px 0px 40px;
				background: linear-gradient(180deg, #FAE25C 0%, #F6CE5C 100%);
				color: #30240A;
				font-size: 24rpx;
				text-align: center;
				line-height: 72rpx;
			}
			.foot-buy {
				width: 176rpx;
				height: 72rpx;
				border-radius: 0rpx 40rpx 40rpx 0rpx;
				background: linear-gradient(63deg, #FD402C 18%, #F8682C 81%);
				color: #fff;
				font-size: 24rpx;
				text-align: center;
				line-height: 72rpx;
			}
			.foot-buy-2 {
				width: 300rpx;
				height: 72rpx;
				border-radius: 40rpx;
				background: linear-gradient(63deg, #FD402C 18%, #F8682C 81%);
				color: #fff;
				font-size: 28rpx;
				text-align: center;
				line-height: 72rpx;
			}
			.foot-buy-3 {
				width: 300rpx;
				height: 72rpx;
				border-radius: 40rpx;
				background: #989898;
				color: #fff;
				font-size: 28rpx;
				text-align: center;
				line-height: 72rpx;
			}
		}
	}
	.buy-popup{
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		padding: 40rpx 20rpx;
		display: flex;
		position: absolute;
		bottom: -100rpx;
		padding-bottom: 150rpx;
		flex-direction: column;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		.bp-goods {
			display: flex;
			margin-bottom: 20rpx;
			.bp-goods-pic{
				margin-right: 20rpx;
				image{
					width: 150rpx;
					height: 120rpx;
					border-radius: 10rpx;
				}
			}
			.bp-goods-content{
				flex: 1;
				overflow: hidden;
				.bp-name {
					flex: 1;
					height: 64rpx;
					color: #000;
					font-size: 28rpx;
					line-height: 32rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical 
				}
			}
		}
		.bp-qty{
			display: flex;
			justify-content: space-between;
			padding: 0rpx 0 30rpx 0;
		}
		.bp-btn{
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			color: #fff;
			text-align: center;
			background-image: linear-gradient(90deg, #FE6035, #EF1224);
		}
		.bp-txt {
			color: #2e2e2e;
			font-size: 28rpx;
		}
		.bp-activity-tip {
			width: 100%;
			background-color: #FAE2E2;
			color: #3D3D3D;
			font-size: 28rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 4rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
		}
		.bp-tip {
			width: 100%;
			color: #EF1224;
			font-size: 24rpx;
			height: 56rpx;
			line-height: 48rpx;
			margin-bottom: 10rpx;
		}
		.bp-cate-scroll {
			max-height: 380rpx;
			width: 100%;
			margin-top: 30rpx;
			overflow-y: auto;
		}
		.bp-cate-box {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			overflow: auto;
			.bp-cate-list {
				padding: 0 30rpx;
				box-sizing: border-box;
				height: 60rpx;
				display: flex;
				overflow: auto;
				align-items: center;
				border-radius: 30rpx;
				border: 2rpx solid #2e2e2e;
				background: rgba(150, 151, 153, 0.1);
				margin-right: 40rpx;
				margin-bottom: 30rpx;
				&.active {
					color: #F97028;
					border: 2rpx solid #F97028;
					background: #FFF7EB;
				}
				&.disable {
					color: #969797;
					border: 2rpx solid #969797;
					background: rgba(150, 151, 153, 0.1);
				}
				.cate-list-tit {
					flex: 1;
					flex-wrap: nowrap;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					color: #2e2e2e;
					font-size: 28rpx;
				}
				.tag {
					width: 120rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
	.detail-pop {
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		padding: 50rpx 40rpx;
		display: flex;
		position: absolute;
		bottom: -100rpx;
		padding-bottom: 200rpx;
		flex-direction: column;
		.pop-close {
			position: absolute;
			top: 52rpx;
			right: 45rpx;
			width: 50rpx;
			height: 50rpx;
		}
		.mb40 {
			margin-bottom: 40rpx;
		}
		.pop-head {
			width: 100%;
			color: #181127;
			font-size: 36rpx;
			line-height: 60rpx;
		}
		.pop-con {
			width: 100%;
			padding: 44rpx 32rpx;
			box-sizing: border-box;
			background-color: #FFF7EB;
			border-radius: 16rpx;
			margin-bottom: 40rpx;
		}
		.pop-tit {
			width: 100%;
			color: #2e2e2e;
			font-size: 30rpx;
			line-height: 52rpx;
			&.active {
				color: #F97028;
			}
		}
		.pop-desc {
			width: 100%;
			color: #969797;
			font-size: 28rpx;
			line-height: 44rpx;
			&.active {
				color: #F97028;
			}
		}
		.pop-btn {
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			color: #fff;
			text-align: center;
			background-image: linear-gradient(90deg, #FE6035, #EF1224);
			position: relative;
			button {
				opacity: 0;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
			}
		}
	}
	/* #ifdef APP-PLUS*/
	.content {
		padding-bottom: 100rpx;
	}
	.detail-foot {
	  padding: 10rpx 25rpx 10rpx 37rpx;
	}
	/* #endif */
	/* #ifdef MP-WEIXIN*/
	.content {
		padding-bottom: 150rpx;
	}
	.detail-foot {
	  padding: 10rpx 25rpx 52rpx 37rpx;
	}
	/* #endif */
</style>
